<template>
	 <div class="login container">
		 <Header>
			 <span>注册</span>
		 </Header>
		 
		<section>
			<div class="login-tel">
				<input type="text" placeholder="输入手机号码" v-model="userTel" pattern="[0-9]"/>
			</div>
			
			<div class="login-code">
				<input type="text" placeholder="输入短信验证码" v-model="userCode" pattern="[0-9]"/>
				<button class="btn" @click="sendCode" 
				:disabled="disabled">{{codeMsg}}</button>
			</div>
			<div class="login-pwd">
				<input type="text" placeholder="输入密码" v-model="userPwd" pattern="[0-9]"/>
			</div>
			<div class='login-btn' @click="register">注册</div>
			
			
		</section>
		 <Tabbar></Tabbar>
	 </div>
</template>

<script>
import Header from "@/views/login/Header.vue"
import Tabbar from "@/components/common/Tabbar.vue";
import { Toast } from 'mint-ui';

//引入封装的依赖
import http from "@/common/api/request.js";

export default{
	name:"Login",
	components:{
		Header,
		Tabbar
	},
	data(){
		return{
			disabled:false,
			userTel:null,
			userCode:null,
			userPwd:null,
			//验证规则
			rules:{
				userTel:{
					//验证规则
					rule:/^1[23456789]\d{9}$/,
					msg:'手机号不能为空，并且时11位数字',
				},
				userPwd:{
					//验证规则
					rule:/^\w{6,12}$/,
					msg:'密码不能为空，并且时6·12位',
				}
			},
			codeNum:6,
			codeMsg:"获取短信验证码",
			code:''
		}
	},
	methods:{
		goUserLogin(){ 
			this.$router.push('/userLogin')
		},
		//获取短信验证码
		sendCode(){
			//前端验证 验证码
			if(!this.validate('userTel')) return;
			
			
			//请求短信验证码接口
			http.$axios({
				url:'/api/code',
				method:'POST',
				data:{
					userTel:this.userTel
				}
			}).then(res=>{
				console.log(res)
				if(res.success){
					this.code = res.data
				}
			})
			
			//禁用按钮
			this.disabled=true;
			
			//倒计时
			let timer = setInterval(()=>{
				--this.codeNum;
				this.codeMsg = `${this.codeNum}秒 后重新发送`
				console.log(this.codeNum)
				if(this.codeNum<0){
					this.disabled = false;
					this.codeNum = 6;
					this.codeMsg = "获取短信验证码"
					clearInterval(timer)
				}
			},1000)
			
		},
		//验证信息提示
		validate(key){
			let bool = true;
			if( !this.rules[key].rule.test(this[key]) ){
				//提示信息
				Toast(this.rules[key].msg);
				bool= false;
				return false;
			}
			return bool;
		},
		
		//点击注册
		register(){
			//验证码是否合规
			if(!this.validate('userPwd')) return;
			
			//判断验证码是否正确
			if(this.code != this.userCode){
				 Toast("验证码不正确");
				 return;
			};
				
			//验证码正确后发送请求，后端验证
			http.$axios({
				url:'/api/register',
				method:'POST',
				data:{
					userTel:this.userTel,
					userPwd:this.userPwd
				}
			}).then(res=>{
				console.log(res)
				//提示信息
				Toast(res.msg);
				//登录失败
				if(!res.success) return;
				//登录成功跳转页面，存储用户信息
				this.$router.push("/login")
			})
			
		},
		
		//去注册页
		goRegister(){
			this.$router.push({
				name:"Register"
			})
		}
	}
}
</script>

<style scoped lang="less">
	.login {
	  background-color: #f5f5f5;
	
	  section {
		font-size: 0.4rem;
	    display: flex;
	    flex-direction: column;
	    align-items: center;
	   
		
		div{
			margin: 0.3rem 0;
			width: 8.5rem;
			height: 1.1rem;
		}
		
		input{
			line-height: 1.1rem;
			background-color: #fff;
			padding:0 0.225rem;
			border: 1px solid #ccc;
			box-sizing: border-box;
		}
		
		.login-tel{
			margin-top: 0.5rem;
			font-size: 0.4rem;
			
			input{
				width: 8.5rem;
			}
		}
		.login-pwd{
			margin-top: -0.2rem;
			font-size: 0.4rem;
			input{
				width: 8.5rem;
			}
		}
		.login-code{
			display: flex;
			font-size: 0.4rem;
			input{
				flex: 1;
			}
			
			button{
				padding:0 0.13rem;
				font-size: 0.4rem;
				line-height: 1.1rem;
				color:#fff;
				background-color:#b0352f;
				border:0;
				border-radius: 0.125rem;
			}
		}
		.login-btn{
			background-color: #b0352f;
			text-align: center;
			line-height:1.1rem ;
			color: #FFF;
			font-size:0.4rem ;
			border-radius:0.125rem ;
		}
	
	  }
	}
</style>